<template>
  <div class="base">
    <el-menu class="el-menu-vertical-demo">
      <sub-path v-for="(item, index) in tree" :key="index" :item="item" />
    </el-menu>
  </div>
</template>

<script>
import SubPath from "@/views/response/componetns/filePath/subPath";
export default {
  name: "FilePath",
  components: { SubPath },
  data: () => {
    return {
      tree: [
        {
          key: "C:",
          icon: "el-icon-location",
          id: 1,
          children: [
            {
              key: "User",
              id: 2,
              children: [{ id: 3, key: "Administrator" }]
            },
            {
              key: "Windows",
              id: 4
            },
            {
              key: "ProgramData",
              id: 5
            },
            {
              key: "Program Files",
              id: 6
            },
            {
              key: "Program Files(x86)",
              id: 7
            }
          ]
        },
        {
          key: "D:",
          id: 8,
          icon: "el-icon-location",
          children: [
            {
              key: "Temp",
              id: 9
            },
            {
              key: "DataStore",
              id: 10
            },
            {
              key: "DataStore",
              id: 11
            },
            {
              key: "DataStore",
              id: 12
            },
            {
              key: "DataStore",
              id: 13
            },
            {
              key: "DataStore",
              id: 14
            }
          ]
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.base {
  height: 520px;
  border: $--color-info-light solid 1px;
  overflow: auto;
}
::v-deep .el-menu {
  border-right: 0;
}
::v-deep .el-menu-item {
  transition: all 300ms;
}
::v-deep .el-menu-item.is-active {
  position: relative;
  background-color: $--color-primary-light-8;
  &::after {
    content: "";
    width: 4px;
    height: 100%;
    background-color: $--color-primary;
    position: absolute;
    right: 0;
  }
}
</style>
